<template>

    <van-nav-bar title="首页" style="margin-bottom: 5px">
        <template #right>
            <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
                <template #reference>
                    <van-icon name="apps-o" size="23" />
                </template>
            </van-popover>
        </template>
    </van-nav-bar>

    <!--轮播图-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"  :height="300">
        <van-swipe-item v-for="image in index.data.imagess" :key="image">
            <img :src="image" />
        </van-swipe-item>
    </van-swipe>

    <van-cell-group style="margin-top:5px;padding: 5px;background-color: #7f8fa6" >
        <van-cell  is-link @click="showPopup"><van-icon name="orders-o" />记事本</van-cell>
        <van-cell style="margin-top: 5px;" is-link @click="showPopup">开发中...</van-cell>
    </van-cell-group>


   <!-- 键盘-->
    <van-number-keyboard :show="index.data.numberKeyboardShow "
                         @blur="index.data.numberKeyboardShow=false"
    />


    <!--网络ip查找弹出层-->
    <van-popup v-model:show="index.data.network.show" position="bottom" :style="{ height: '30%' }" >
        <van-button type="danger" class="bk_btn" @click="queryIP()">获取网络IP</van-button>
        <van-cell-group inset>

            <van-row >
                <van-col span="4">
                    <div style="margin-top: 10px;text-align: center">ip</div>
                </van-col>
                <van-col span="4">
                    <van-field v-model="index.data.network._ip1"  border ="true"  placeholder="地址1"/>
                </van-col>
                <van-col span="1">
                    <div style="margin-top: 10px">-</div>
                </van-col>
                <van-col span="4">
                    <van-field v-model="index.data.network._ip2"  placeholder="地址2"/>
                </van-col>
                <van-col span="1">
                    <div style="margin-top: 10px">-</div>
                </van-col>
                <van-col span="4">
                    <van-field v-model="index.data.network._ip3"  placeholder="地址3"/>
                </van-col>
                <van-col span="1">
                    <div style="margin-top: 10px">-</div>
                </van-col>
                <van-col span="4">
                    <van-field v-model="index.data.network._ip4" placeholder="地址4"/>
                </van-col>
            </van-row>
            <van-row >
                <van-col span="4">
                    <div style="margin-top: 10px">访问地址</div>
                </van-col>
                <van-col span="20">
                        <van-field v-model="index.data.network.uri"  :border ="true"  placeholder="访问地址" />
                </van-col>
            </van-row>
            <van-field v-model="index.data.network.ip" label="获取的地址" />
        </van-cell-group>
    </van-popup>
</template>

<script setup>
    //加载index
    import index from '@/js/view/index.js'
    import {ref} from "vue"
    const showPopover = ref(false);
    // 通过 actions 属性来定义菜单选项
    const actions = [
        { text: '打开键盘' },
        { text: '查询网络' }
    ];

    const onSelect = (action) => {
        var text = action.text;
        if (text == "打开键盘") {
            if(index.data.numberKeyboardShow){
                index.data.numberKeyboardShow=false
            }else {
                index.data.numberKeyboardShow=true
            }
        }
        if (text == "查询网络") {
            index.data.network.show?index.data.network.show=false:index.data.network.show=true
        }
    };

    /**
     * 本地查询IP方法
     */
    function queryIP(){
        index.queryIP(index.data)
    }
    //键盘事件
    function onInput(a) {

    }
    //键盘事件
    function onDelete() {

    }
</script>

<style scoped>

    img {
        width: 100%;
        height: 300px;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }

    .bk_btn {
        width: 100%;
    }

</style>